import React from 'react'
import {
    NavLink,
} from 'react-router-dom';
import Header from "../common/header/Header.jsx";
import './home.styl'

class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tabs: [
                {path: '', text: '推荐'},
                {path: '/rank', text: '排行榜'},
                {path: '/search', text: '搜索'},
            ]
        }
    }

    render() {
        return (
            <div className='home'>
                <Header/>
                <div className="tabList">
                    {
                        this.state.tabs.map((tab, index) => (
                            <span key={index} className="tabItem">
                                <NavLink exact to={`${this.props.match.url}${tab.path}`}>
                                    {tab.text}
                                </NavLink>
                            </span>
                        ))
                    }
                </div>
                {this.props.children}
            </div>
        )
    }
}

export default Home